<template>
  <div class="filter-wrapper" v-if="showFilter" :style="{'height': bottomBarHeight}">
    <div class="mask" @click="closeFilter" @touchmove.prevent></div>
    <div class="base-panel">
      <div class="title">
        <div @click="filterData">{{title}}</div>
        <div @click="resetFilter">清除筛选</div>
      </div>
      <div class="filter-options">
        <div class="option-item" v-if="page === 'storage' || page === 'productionPlan'">
          <p>单据编号</p>
          <el-input type="text" ref="input1" v-model="planNumber" placeholder="请输入单据编号" @blur="filterData" @focus="showResetBtn=false;"></el-input>
        </div>
        <div class="option-item" v-if="page === 'productionPlan'">
          <p>计划名称</p>
          <el-input type="text" ref="input2" v-model="planName" placeholder="请输入计划名称" @blur="filterData" @focus="showResetBtn=false;"></el-input>
        </div>
        <div class="option-item" v-if="page === 'storage' || page === 'time' || page === 'productionPlan' || page === 'storageUnderPlan'">
          <p>{{page === 'storage' || page === 'storageUnderPlan' ? '计件申请日期' : '计划完工日期'}}</p>
          <div @click="selectDate('startTime')">{{!startTime ? '请选择起始日期' : startTime}}</div>
          <div @click="selectDate('endTime')">{{!endTime ? '请选择截止日期' : endTime}}<i class="el-icon-arrow-right"></i></div>
        </div>
        <div class="option-item" v-if="page === 'productionPlan'">
          <p>搜索类型</p>
          <div @click="selectType">{{searchType==='' ? '全部' : searchType==='1' ? '当前用户' : ''}}</div>
        </div>
      </div>
      <!-- <div @click="resetFilter" class="bottom-btn" v-if="showResetBtn">清除筛选</div> -->
    </div>
  </div>
</template>

<script>
import formUtil from "@/utils/formUtil";
import {dateUtil} from '@/utils/dateUtil'
import dingMixin from  '@/mixins/ding'

export default {
  data() {
    return {
      showFilter: false,
      planNumber: '',
      planName: '',
      startTime: '',
      endTime: '',
      searchType: '',
      curSearchTypeName: '全部',
      currentDate: dateUtil.thisDay(),
      bottomBarHeight: '',
      showResetBtn: true,
    }
  },
  props: ['page', 'title', 'showArchiveList', 'bottomHeight'],
  mixins: [dingMixin],
  methods:{
    init() {
      this.showFilter = true;
    },
    closeFilter() {
      this.showFilter = false;
    },
    filterData() {
      this.$emit('filterData', {
        planNumber: this.planNumber,
        planName: this.planName,
        startTime: this.startTime,
        endTime: this.endTime,
        searchType: this.searchType
      })
      this.showResetBtn = true;
    },
    selectDate(item) {
      this.mobileSelectDate(this[item], (date) => {
        this[item] = date;
        if(this.startTime && this.endTime && (new Date(this.startTime) - new Date(this.endTime) > 0)) {
          this[item] = '';
          return this.mobileAlert('截止日期不可小于开始日期')
        }
        this.filterData()
      });
    },
    resetFilter() {
      this.reset();
      this.filterData();
    },
    reset() {
      this.planNumber = '';
      this.planName = '';
      this.startTime = '';
      this.endTime = '';
      this.searchType = '';
      this.curSearchTypeName = '全部';
      this.currentDate = dateUtil.thisDay();
    },
    selectType() {
      this.mobileChosen([{key: '全部', value: ''}, {key: '当前用户', value: '1'}], this.curSearchTypeName, (data) => {
        this.curSearchTypeName = data.key;
        this.searchType = data.value;
        this.filterData()
      })
    },
  },
  async mounted() {
    this.bottomBarHeight = 'calc(100vh - ' + this.bottomHeight + 'px)';
    this.mobileGetDevice(({model, brand, version}) => {
      if(brand === 'iPhone' && ( model.indexOf('10') > 0 || model.indexOf('11') > 0)) {
        this.bottomBarHeight = 'calc(100vh - ' + (Number(this.bottomHeight + 34)) + 'px)';
      }
    })
  }
}
</script>

<style lang="scss" scoped>
  .filter-wrapper{
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    z-index: 5;
    .mask{
      background: rgba(0,0,0,0.5);
      height: 100%;
      position: absolute;
      top:0;
      left:0;
      width: 100%;
    }
    .base-panel{
      width: 70%;
      position: absolute;
      top:0;
      right: 0;
      height: 100%;
      background: white;
      .title{
        line-height: 46px;
        color: #409EFF;
        padding: 0 16px;
        border-bottom: 1px solid #F6F6F6;
        display: flex;
        justify-content: space-between;
      }
      .filter-options{
        padding: 0 16px;
        .option-item{
          overflow: hidden;
          padding-top:16px;
          padding-bottom: 10px;
          border-bottom: 1px solid #F6F6F6;
          position: relative;
          padding-right: 15px;
          p{
            margin: 0;
            font-weight: bold;
          }
          div{
            margin-top: 10px;
            color: #909399;
          }
          i{
            position: absolute;
            bottom: 10px;
            right: 0;
            font-weight: bold;
          }
        }
      }
      .bottom-btn{
        position: absolute;
        bottom: 0;
        right:0;
        width: 100%;
        line-height: 46px;
        color: #409EFF;
        padding-left: 16px;
        border-top: 1px solid #F6F6F6;
      }
    }
    .module-panel{
      width: 80%;
      position: absolute;
      top:0;
      right: 0;
      height: 100%;
      background: white;
      .title{
        font-weight: bold;
        padding-left: 16px;
        border-bottom: 1px solid #F6F6F6;
        line-height: 46px;
      }
      .module-wrapper{
        height: calc(100vh - 150px);
        overflow: auto;
        padding: 16px 16px;
        .module-item{
          padding-left:15px;
          line-height: 30px;
          border-bottom: 1px solid #F6F6F6;
          margin-bottom: 5px;
        }
      }
      .bottom-btn{
        position: absolute;
        bottom: 0;
        right:0;
        width: 100%;
        display: flex;
        z-index: 2;
        div{
          flex:1;
          text-align: center;
          line-height: 46px;
          background: #F2F2F2;
          color: #8D8F96;
        }
        >div:last-child{
          color:white;
          background: #639EFC;
        }
      }
    }
  }
</style>